<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content [core-swipe-navigation]="notifications">
    <core-loading [hideUntil]="loaded">
        <div class="list-item-limited-width" *ngIf="notification">

            <ion-item class="ion-text-wrap core-notification-title" lines="full">
                <core-user-avatar *ngIf="notification.useridfrom > 0" slot="start" [userId]="notification.useridfrom"
                    [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname">
                    <div class="core-avatar-extra-img" *ngIf="notification.iconurl">
                        <img [url]="notification.iconurl" alt="" role="presentation" core-external-content>
                    </div>
                </core-user-avatar>

                <ng-container *ngIf="notification.useridfrom <= 0">
                    <img *ngIf="notification.imgUrl" class="core-notification-img" [url]="notification.imgUrl" core-external-content alt=""
                        role="presentation" slot="start">
                    <div class="core-notification-icon" *ngIf="!notification.imgUrl" slot="start">
                        <img *ngIf="notification.iconurl" [url]="notification.iconurl" core-external-content alt="" role="presentation">
                        <ion-icon *ngIf="!notification.iconurl" name="fas-bell" aria-hidden="true" />
                    </div>
                </ng-container>

                <ion-label>
                    <p class="item-heading">
                        <core-format-text [text]="notification.subject" contextLevel="system" [contextInstanceId]="0"
                            [wsNotFiltered]="true" />
                    </p>
                    <p *ngIf="notification.timecreated > 0">
                        {{ notification.timecreated | coreTimeAgo }}
                        <ng-container *ngIf="notification.useridfrom > 0"> · {{ notification.userfromfullname }}</ng-container>
                    </p>
                </ion-label>
            </ion-item>
            <ion-item class="ion-text-wrap core-notification-body">
                <ion-label>
                    <core-format-text [text]="notification.mobiletext | coreCreateLinks" contextLevel="system" [contextInstanceId]="0" />
                </ion-label>
            </ion-item>
        </div>

        <div collapsible-footer appearOnBottom *ngIf="loaded && actions && actions.length > 0" slot="fixed">
            <div class="list-item-limited-width adaptable-buttons-row">
                <ion-button expand="block" (click)="action.action()" *ngFor="let action of actions">
                    <ion-icon slot="start" name="{{action.icon}}" aria-hidden="true" />
                    {{ action.message | translate }}
                </ion-button>
            </div>
        </div>
    </core-loading>
</ion-content>
